前面介紹了Javascript的定位及能做的事情,但就具體印象來說是蠻模糊的,究竟他在html、css、一個網頁間能改變哪些事物,做到怎麼樣的效果,接下來就簡單說明一些範例。
一個網頁裡的基石、內容就是Html,那透過我們的主角,可以很輕易地更改Html的內容。
透過 getElementById() 抓取Html元素,我們要先知道他的名子(id),知道後就可以更改內容(使用innerHtml)。
<body>
<p id="demo">哈囉,悲慘的世界</p>
<button onclick="change()">按鈕</button>
</body>
<script>
function change() {
document.getElementById("demo").innerHTML = "哈囉,開心的世界";
}
</script>
當按鈕點擊後,觸發change函數,輕鬆將Html裡的內容改為"哈囉,開心的世界"。
能夠改變Html、那Css當然也沒問題囉!
<body>
<p id="demo">哈囉,悲慘的世界</p>
<button onclick="change()">按鈕</button>
</body>
<script>
function change() {
document.getElementById("demo").style.color = "blue";
}
</script>
透過.style.xxx(你想改變的屬性,例:color、fontsize、fontfamily)都可以輕易做到。
將文字顏色改成藍色~
我們很常會有將內容隱藏或顯示的需求,例如按下按鈕哪些表單要出現、要隱藏,這時候我們也可以使用Javascript去完成。
<body>
<p id="demo">哈囉,悲慘的世界</p>
<button onclick="change()">按鈕</button>
</body>
<script>
function change() {
document.getElementById("demo").style.display = "none";
}
</script>
而顯示也很簡單,大概念都跟改變style屬性一樣!
<body>
<p id="demo">哈囉,悲慘的世界</p>
<button onclick="change()">按鈕</button>
</body>
<script>
function change() {
document.getElementById("demo").style.display = "block";
}
</script>
認識完Javascript基礎能做到的事情後! 是不是比較有概念了呢?下一篇就讓我們介紹如何引入js吧